<template name="basics">
	<view>
		<scroll-view scroll-y class="page">
			<image src="/static/index.jpg" mode="widthFix" class="response"></image>
			<view class="nav-list">
				<navigator
					hover-class="none"
					:url="'/pages/project/' + item.name + '/list'"
					class="nav-li"
					navigateTo
					:class="'bg-' + item.color"
					:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
					v-for="(item, index) in list"
					:key="index"
				>
					<view class="nav-title">{{ item.title }}</view>
					<view class="nav-name">{{ item.name }}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'basics',
	data() {
		return {
			allMenu: [
				{
					title: '主子表',
					name: 'demo',
					color: 'cyan',
					cuIcon: 'newsfill',
					// roles表示权限
					roles: ['tongji']
				},
				{
					title: '树',
					name: 'layout',
					color: 'cyan',
					cuIcon: 'newsfill',
					roles: ['caiwu']
				}
			]
		};
	},
	computed: {
		...mapState(['roles','user']),
		list() {
			// 过滤后的列表   菜单必须拥有权限的人才能看到
			let arr = [];
			this.allMenu.forEach(val => {
				//if (this.isExitsRoles(val.roles) || user.loginCode=="system") {
					arr.push(val);
				//}
			});
			return arr;
		}
	},
	methods: {
		// 两个role是否有交集
		isExitsRoles(roleList) {
			let set1 = new Set(roleList);
			let set2 = new Set(this.roles);
			let intersect = [...new Set([...set1].filter(x => set2.has(x)))];
			return intersect.length > 0;
		}
	}
};
</script>
<style>
.page {
	height: 100vh;
}
</style>
